<template>
  <div class="container">
    <!-- 
        fill: 填充色 | url(id)这里主要是引用渐变色作为背景
        stroke: 线条的颜色
        stroke-width: 线条的宽度
        stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ，round和square会影响线条的长度
        opacity: 不透明度 0~1
        fill-rule: nonzero (非零环绕原则)evenodd
        stroke-dasharray: 创建虚线数组 x,y,z,… (长度，间隔，长度，间隔，。。。。)
        stroke-dashoffset: 偏移
        filter: url(id) 添加滤镜
     -->
    <svg width="600" height="60" class="text">
        <defs>
            <linearGradient id="geekColor" gradientTransfrom="rotate(90)">
            <stop offset="0%" stop-color="#12cad6"></stop>
            <stop offset="100%" stop-color="#AB82FF"></stop>
            </linearGradient>
        </defs>
        <text class="logo_text" x="50" y="40">音乐网站用户数据可视化展示</text>
    </svg>
  </div>
</template>

<script>
export default {
    name:'Header'
}
</script>

<style>
.logo_text{
    font-size: 32px;
    letter-spacing: 8px;
    fill:none;
    stroke: url("#geekColor");
    stroke-width: 1.5;
    stroke-dasharray: 10 800;
    stroke-dashoffset: 10;
    animation: 3s linear 0s drawing forwards;
}
@keyframes drawing {
    to{
        stroke-dasharray: 800;
        stroke-dashoffset: 0;
    }
}
</style>